<template>
	<view class="distributor_recruit_container">
		<view class="distributor_recruit_box">
			<!-- 顶部 -->
			<view class="top_box">
				<view class="top_img_box">
					<u-loading mode="flower" v-if="showImgLoading"></u-loading>
					<image :src="posterShowImg" mode="" class="top_img" :show-menu-by-longpress="true" v-else></image>
				</view>
			</view>

			<!-- 底部 -->
			<view class="bottom_box">
				<!-- <view class="bottom_copywriting_box">
					<view class="copywriting_icon_box">
						<image src="/static/shop/Copywritingicon-.png" mode="" class="copywriting_icon"></image>
					</view>
					<view class="copywriting_title">
						更换文案
					</view>
				</view>
				<view class="copywriting_input_box">
					<view class="copywriting_input">
						{{ copywritingTitle }}
					</view>
					<view class="refresh_icon_box" @click="handleCopy(copywritingTitle)">
						<image src="/static/shop/icon-copy-shop.png" mode="" class="refresh_icon"></image>
					</view>
					<view class="refresh_icon_box" @click="handleRefresh">
						<image src="/static/shop/icon-refresh.png" mode="" class="refresh_icon"></image>
					</view>
				</view> -->

				<view class="bottom_components_box">
					<view class="components_icon_box">
						<image src="/static/my/icon-components.png" mode="" class="components_icon"></image>
					</view>
					<view class="components_title">选择模板</view>
				</view>

				<view class="components_img_box">
					<view class="components_img_all" v-for="(item, index) in shopImgList" :key="index" @click="handleComponents(item, index)">
						<image :src="item.img" mode="" class="components_img"></image>

						<view class="mask" v-if="isActive == index"></view>
						<view class="right_icon_box" v-if="isActive == index">
							<image src="/static/my/icon-right.png" mode="" class="right_icon"></image>
						</view>
					</view>
				</view>

				<view class="share_box">
					<!-- <view class="share_all" @click="handleShare('微信好友')" style="position: relative;">
						<view class="share_img_box">
							<image src="/static/home/icon-wx.png" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							微信好友
						</view>
						<button open-type="share" style="position: absolute;top: 0;left: 0; height: 126rpx;opacity: 0;">
							微信好友
						</button>
					</view> -->

					<!-- <view class="share_all" @click="handleShare('朋友圈')" style="position: relative;">
						<view class="share_img_box">
							<image src="/static/home/icon-pyq.png" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							朋友圈
						</view>
					</view> -->

					<view class="share_all" @click="handleShare('保存本地')" style="position: relative">
						<view class="share_img_box">
							<image :src="saveIcon" mode="" class="share_img"></image>
						</view>
						<view class="share_title">保存本地</view>
					</view>

					<view class="share_all" @click="handleShare('复制链接')" style="position: relative">
						<view class="share_img_box">
							<image :src="copyUrlIcon" mode="" class="share_img"></image>
						</view>
						<view class="share_title">复制链接</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wx from 'weixin-js-sdk';
import parseQueryString from '@/utils/interceptUrl.js';
// import VConsole from 'vconsole';
export default {
	data() {
		return {
			wxFriendIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a782114d9_1727506306.png',
			wxFriendAllIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a762ccf6f_1727506274.png',
			saveIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a774ecb69_1727506292.png',
			copyUrlIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a75607448_1727506262.png',
			shopImgList: [],
			isActive: 0,
			pageObj: {
				pageNow: 1,
				pageSize: 50
			},
			posterObj: {},
			posterShowImg: '',
			posterShowShareImg: '',
			timesTamp: '',
			promotionSahreUrl: '',
			jsSdkWx: {},
			shareImg: '/static/logo.png',
			share: {
				title: '招募分销员',
				path: '', //页面路径
				imageUrl: '' //页面图，可自定义
			},
			showImgLoading: false,
			percentageObj: {}
		};
	},
	onLoad() {
		// const vConsole = new VConsole();
		this.timesTamp = Date.parse(new Date());
		this.getPosterList();
		// this.getJsSdk()
	},

	// 分享好友
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {},
			fail(res) {}
		};
	},

	// 分享朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
			},
			fail(err) {
				uni.showToast({
					title: '分享失败',
					icon: 'error'
				});
			}
		};
	},
	methods: {
		// 获取登录合伙人信息接口
		getAgentLoginInfo() {
			this.$request('/api/getAgentLoginInfo', {}, 'GET').then((res) => {
				if (res.code == 1) {
					this.percentageObj = res.data;
					this.getFxUserPoster();
					// this.getFxUserPlanPoster()
				} else {
					uni.showToast({
						title: '查询用户信息失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 分享
		handleShare(val) {
			const that = this;
			if (val == '保存本地') {
				uni.downloadFile({
					url: that.posterShowShareImg,
					success: (res) => {
						let imagePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: imagePath,
							success(res) {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail(err) {
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									// 用户拒绝授权
									uni.showModal({
										title: '提示',
										content: '需要您授权保存图片到相册',
										showCancel: false,
										success(modalRes) {
											// 尝试打开设置页面
											uni.openSetting({
												success(settingRes) {
													if (settingRes.authSetting['scope.writePhotosAlbum']) {
														// 用户重新授权，再次尝试保存图片
														uni.saveImageToPhotosAlbum({
															filePath: imagePath,
															success(res) {
																uni.showToast({
																	title: '保存成功',
																	icon: 'success'
																});
															},
															fail(err) {
																uni.showToast({
																	title: '保存失败',
																	icon: 'none'
																});
															}
														});
													} else {
														// 用户未授权
														uni.showToast({
															title: '您未授权保存图片到相册',
															icon: 'none'
														});
													}
												}
											});
										}
									});
								} else {
									// 其他错误情况
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							}
						});

						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	success: function() {
						// 		uni.showToast({
						// 			title: '保存成功，快去分享吧',
						// 			icon: 'none'
						// 		})
						// 	},
						// 	fail(err) {
						// 		uni.showToast({
						// 			title: '下载失败',
						// 			icon: 'none'
						// 		})
						// 	}
						// })
					}
				});
			} else if (val == '复制链接') {
				uni.setClipboardData({
					data: that.promotionSahreUrl,
					success: (res) => {
						uni.showToast({
							title: '复制链接成功',
							icon: 'none'
						});
					}
				});
			} else if (val == '微信好友') {
				uni.setClipboardData({
					data: that.promotionSahreUrl,
					success: (res) => {
						uni.showToast({
							title: '复制链接成功',
							icon: 'none'
						});
					}
				});
				// // 换成我的小店页面
				// let originalUrl = that.promotionSahreUrl.split("?")[1]
				// let url = parseQueryString(originalUrl)
				// let agentId = url.agent_id
				// let pid = url.pid
				// let ppid = url.ppid
				// this.share.path = '/pages/distributorsRegister/distributorsRegister?agent_id=' + agentId +
				// 	'&pid=' +
				// 	pid + '&ppid=' + ppid
			} else if (val == '朋友圈') {
				let originalUrl = that.promotionSahreUrl.split('?')[1];
				let url = parseQueryString(originalUrl);
				let agentId = url.agent_id;
				let pid = url.pid;
				let ppid = url.ppid;
				// 换成我的小店页面
				this.share.path = '/pages/distributorsRegister/distributorsRegister?agent_id=' + agentId + '&pid=' + pid + '&ppid=' + ppid;
				uni.showToast({
					title: '请点击右上角三个点进行分享朋友圈',
					icon: 'none'
				});
			}
		},

		// 获取海报
		getPosterList() {
			this.$request(
				'/api/getPosterList',
				{
					type: '1',
					status: '1',
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					this.shopImgList = res.data;
					this.posterObj = res.data[0];
					this.showImgLoading = true;
					this.getAgentLoginInfo();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 创建分销员海报-新
		getFxUserPoster() {
			this.$request(
				'/api/getFxUserPoster',
				{
					poster_id: this.posterObj.id,
					type: '1'
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					this.showImgLoading = false;
					this.posterShowImg = res.data + '?v=' + this.timesTamp;
					this.posterShowShareImg = res.data;
					this.promotionSahreUrl = res.url;
				} else {
					this.showImgLoading = false;
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// getFxUserPlanPoster() {
		// 	this.$request('/api/getFxUserPlanPoster', {
		// 		poster_id: this.posterObj.id,
		// 		type: '2',
		// 	}, 'POST').then(res => {
		// 		if (res.code == 1) {
		// 			this.showImgLoading = false
		// 			this.posterShowImg = res.data + '?v=' + this.timesTamp
		// 			this.posterShowShareImg = res.data
		// 			this.promotionSahreUrl = '?' + res.url
		// 		} else {
		// 			this.showImgLoading = false
		// 			uni.showToast({
		// 				title: res.msg,
		// 				icon: 'none'
		// 			})
		// 			return
		// 		}
		// 	})
		// },

		// 选择模板
		handleComponents(item, index) {
			this.isActive = index;
			this.posterObj = item;
			this.getFxUserPoster();
			// this.getFxUserPlanPoster()
		}
	}
};
</script>

<style lang="scss" scoped>
.distributor_recruit_container {
	background: #7f7f7f;

	.distributor_recruit_box {
		.top_box {
			display: flex;
			justify-content: center;
			padding: 57rpx 0;

			.top_img_box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 544rpx;
				height: 868rpx;

				.top_img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
				}
			}
		}

		.bottom_box {
			width: 750rpx;
			background: #ffffff;

			.bottom_copywriting_box {
				display: flex;
				align-items: center;
				padding: 34rpx 27rpx 0 36rpx;

				.copywriting_icon_box {
					width: 36rpx;
					height: 36rpx;

					.copywriting_icon {
						width: 100%;
						height: 100%;
					}
				}

				.copywriting_title {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}

			.copywriting_input_box {
				display: flex;
				align-items: center;
				margin: 28rpx 27rpx 36rpx 36rpx;

				.copywriting_input {
					display: flex;
					align-items: center;
					width: 623rpx;
					height: 70rpx;
					border: 2rpx solid #e6e6e6;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
					padding: 5rpx 0 5rpx 30rpx;
				}

				.refresh_icon_box {
					width: 36rpx;
					height: 36rpx;
					margin-left: 26rpx;

					.refresh_icon {
						width: 100%;
						height: 100%;
					}
				}
			}

			.bottom_components_box {
				display: flex;
				align-items: center;
				padding: 20rpx 27rpx 32rpx 36rpx;

				.components_icon_box {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;

					.components_icon {
						width: 100%;
						height: 100%;
					}
				}

				.components_title {
					font-size: 30rpx;
					font-family: all-font;
					font-weight: 500;
					color: #333333;
				}
			}

			.components_img_box {
				display: flex;
				// width: 100%;
				overflow-x: scroll;
				margin: 0 37rpx 0;

				.components_img_all {
					position: relative;
					margin-right: 19rpx;

					.components_img {
						width: 175rpx;
						height: 279rpx;
						border-radius: 12rpx;
					}

					.mask {
						width: 100%;
						/* 遮罩层宽度与容器等宽 */
						height: 100%;
						/* 遮罩层高度与容器等高 */
						background-color: rgba(0, 0, 0, 0.5);
						/* 设置背景色及透明度 */
						position: absolute;
						/* 将遮罩层放置于容器内部 */
						top: 0;
						left: 0;
						border-radius: 12rpx;
					}

					.right_icon_box {
						position: absolute;
						top: 10rpx;
						right: 12rpx;
						width: 40rpx;
						height: 40rpx;

						.right_icon {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.share_box {
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 26rpx;

				.share_all {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.share_img_box {
						width: 82rpx;
						height: 82rpx;
						margin: 33rpx 0 21rpx;

						.share_img {
							width: 100%;
							height: 100%;
						}
					}

					.share_title {
						font-size: 30rpx;
						font-family: all-font;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
}
</style>
